<template>
  <div class="box">
    <div class="l-box">
      <video v-if="videoUrl" class="v-box" :src="videoUrl" autoplay controls></video>
      <div v-else class="p-img-box">
        <img class="v-box" :src="bImg" alt="" />
        <img class="p-ico" v-if="productMaterialRespVOS && productMaterialRespVOS[0] && productMaterialRespVOS[0].materialUrl" src="/image/about/play.png" alt="" @click="openVideo"/>
      </div>
      <swiper
        :slidesPerView="4"
        :modules="modules"
        :pagination="{
          clickable: true,
        }"
        :navigation="true"
        class="imgs-box"
      >
        <swiper-slide v-for="(item, index) in proData?.sliderPicUrls" :key="index">
          <img class="imgs" :src="item" alt="" @click="changeBimg(item)" />
        </swiper-slide>
      </swiper>

      <!-- <div class="imgs-box">
        <div
          class="i-box"
          v-for="(item, index) in proData?.sliderPicUrls"
          :key="index"

        >
          <img class="imgs" :src="item" alt="" />
        </div>
      </div> -->
    </div>
    <div class="r-box">
      <div class="tit">{{ proData.name }}</div>
      <div class="sales">Sales {{ proData.salesCount }}m</div>
      <div class="m-tit">Variations</div>
      <div v-if="proData.skus" class="sku-box">
        <div class="s-tit">
          <span class="t-w">sku ({{ proData?.skus?.length }})：</span>
        </div>
        <div class="sku-m-box">
          <div
            :class="['s-main', changeSku == item.id ? 's-chose' : '']"
            v-for="(item, index) in proData?.skus.slice(0, 3)"
            :key="index"
            @click="fChangeSku(item)"
          >
            <img class="imgs" :src="item.picUrl" alt="" />
            <div class="s-name">
              <span v-for="(ita, ind) in item.properties" :key="ind">
                {{ ita.propertyName }}:{{ ita.valueName
                }}<span v-if="ind != item.properties.length - 1" class="fg">|</span>
              </span>
            </div>
          </div>
          <div v-if="moreShow" class="o-b">
            <div class="other-s">
              <div
                :class="['s-main', changeSku == item.id ? 's-chose' : '']"
                v-for="(item, index) in proData?.skus.slice(3)"
                :key="index"
                @click="fChangeSku(item)"
              >
                <img class="imgs" :src="item.picUrl" alt="" />
                <div class="s-name">
                  <span v-for="(ita, ind) in item.properties" :key="ind">
                    {{ ita.propertyName }}:{{ ita.valueName
                    }}<span v-if="ind != item.properties.length - 1" class="fg">|</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <img
          v-if="proData?.skus.length > 3 && !moreShow"
          class="s-icons"
          src="/image/detail/down.png"
          alt=""
          @click="showMore"
        />
        <img v-if="moreShow" class="s-icons" src="/image/detail/up.png" alt="" @click="showMore" />
      </div>

      <div v-if="skuInfo.material" class="s-tit mt20">
        <span class="t-w">Material:</span> <span class="s-result">{{ skuInfo.material }}</span>
      </div>
      <!-- <div class="s-tit mt20">
        <span class="t-w">Density:</span> <span class="s-result">{{ proInfo.density }}</span>
      </div> -->
      <div class="s-tit mt20">
        <span class="t-w">{{ language.nav.weight }}:</span> <span class="s-result">{{ skuInfo.weight }} G/M</span>
      </div>
      <div class="s-tit mt20">
        <span class="t-w">{{  language.nav.width }}:</span> <span class="s-result">{{ skuInfo.width }} CM</span>
      </div>
      <div class="s-tit mt20">
        <span class="t-w">Stock:</span> <span class="s-result">{{ skuInfo.stock }} m</span>
      </div>
      <!-- <div class="s-tit mt20">
        <span class="t-w">Fineness:</span> <span class="s-result">{{ proInfo.fineness }}</span>
      </div>
      <div class="s-tit mt20">
        <span class="t-w">Pattern:</span> <span class="s-result">{{ proInfo.pattern }}</span>
      </div> -->
      <div class="lines"></div>
      <div class="s-tit mt20">
        <span class="t-w">{{  language.nav.Prices }}:</span>
        <div class="s-price-box">
          <p class="s-price" >
            <span>{{ store.currency }} {{ roundFractional((skuInfo.volumePrice || 0) / 100, 2) }}/m</span>
            <span class="mop">{{ language.nav.from }} {{ skuInfo.volumeSpec || "-" }}m</span>
            </p
          >
          <p class="s-price" >
            <span>{{ store.currency }} {{ roundFractional((skuInfo.price || 0) / 100, 2) }}/m</span>
            <span class="mop">{{ skuInfo.mop }}m {{ language.nav.to }} {{ skuInfo.volumeSpec || "-" }}m</span>
            </p
          >
        </div>

      </div>
      <!-- <div class="s-tit mt20">
        <span class="t-w">MOQ:</span> <span class="s-result">{{ proInfo.moq }}</span>
      </div> -->
      <div class="s-bottom">
        <div class="b-btn">Order sample</div>
        <div class="collect-box" @click="changeCollect">
          <img v-if="!collectStatus" class="c-icon" src="/image/common/collect1.png" alt="" />
          <img v-else class="c-icon" src="/image/common/collect2.png" alt="" />
          <span class="c-text">{{ collectStatus ? "Collected" : "Collect" }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { commonStore } from "~/components/store";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation } from "swiper/modules";
import "swiper/css/bundle";
import "swiper/css/navigation";
import { language } from "~/conf";

const modules = [Navigation];
const store = commonStore();
const emit = defineEmits(["changeCollect"]);
type Tproperty = {
  propertyName: string;
  valueName: string;
};
type Tsku = {
  picUrl: string;
  id: number;
  price: number;
  volumePrice: number;
  stock: number;
  volume: number;
  weight: number;
  material: string;
  mop: number;
  volumeSpec: string;
  width: string;
  properties: Tproperty[];
};
type Tvideo = {
    materialType:string;
    materialUrl:string;
    materialId:number
  }
type TproData = {
  sliderPicUrls: string[];
  name: string;
  salesCount: number;
  skus: Tsku[];
  productMaterialRespVOS:Tvideo[];
};
const props = defineProps<{
  proData: TproData;
  collectStatus: Boolean;
}>();

let videoUrl = ref("");
let moreShow = ref(false);
let changeSku = ref(-1);
let skuInfo = ref({} as Tsku);
let bImg = ref("");
let productMaterialRespVOS = ref<Tvideo[]>([])

const showMore = () => {
  moreShow.value = !moreShow.value;
};
const fChangeSku = (item: Tsku) => {
  changeSku.value = item.id;
  skuInfo.value = item;
};
const changeBimg = (item: string) => {
  bImg.value = item;
  videoUrl.value = ''
};
const changeCollect = () => {
  emit("changeCollect");
};
const openVideo = () => {
  videoUrl.value = productMaterialRespVOS.value[0].materialUrl;
};
watch(
  () => props.proData,
  (newVal: TproData) => {
    if (newVal.skus && newVal.skus.length) {
      skuInfo.value = newVal?.skus[0];
      bImg.value = newVal.sliderPicUrls[0];
      changeSku.value = newVal?.skus[0].id;
      productMaterialRespVOS.value = newVal.productMaterialRespVOS
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="stylus" scoped>
.mt20{
  margin-top 20px
}
.box{
  display flex
  justify-content flex-start
  align-items flex-start
  padding 0 27px 0 35px
  .l-box{
    .p-img-box{
      position relative
      .p-ico{
        position absolute
        left 50%;
        top 50%;
        transform translate(-50%,-50%)
        width 50px
        cursor pointer
        opacity .4
      }
    }
    .v-box{
      width:526px;
      height:526px;
      display:block;
      border-radius: 16px;
    }
    .imgs-box{
      display flex;
      align-items center
      margin-top 13px
      width:526px;
      .imgs{
        width:123px
        border-radius: 8px;
        cursor pointer
      }
    }
  }
  .r-box{
    padding-top 13px
    margin-left 25px
    .tit{
      font-weight: bold;
      font-size: 20px;
      margin-bottom 18px
    }
    .sales{
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      margin-bottom 24px
    }
    .m-tit{
      font-weight: bold;
      font-size: 14px;
      margin-bottom 17px
    }
    .s-tit{
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        display flex
        .t-w{
          display inline-block
          width:70px
        }
        .s-result{
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }
        .s-price-box{
          .s-price{
            font-weight: bold;
            font-size: 19px;
            color:#000
            display flex
            width 300px
            justify-content space-between;
            .mop{
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              margin-left 10px
            }
          }
        }

    }
    .lines{
      height: 1px;
      background: #E1E1E1;
      margin:20px 0
    }
    .o-b{
      display flex;
      justify-content flex-start
      align-items flex-start
    }
    .sku-box,.other-s{
      display flex
      justify-content flex-start
      align-items flex-start
      flex-wrap wrap
      .sku-m-box{
        width 400px
        display flex
        justify-content flex-start
        align-items flex-start
        flex-wrap wrap
      }
      .s-main{
        display:flex;
        justify-content flex-start;
        align-items center;
        cursor pointer
        margin-right 20px
        margin-bottom 10px
        background-color #f5f5f5;
        padding 5px
        border-radius 5px
        box-sizing border-box
        transition all .3s
        .imgs{
          width:30px;
          height:30px;
          border-radius: 4px;
          display:block;
          margin-right 10px
        }
        .s-name{
          font-weight: 400;
          font-size: 14px;
        }
        .fg{
          margin 0 5px
        }
      }
      .s-chose{
        color:#fff
        background: rgba(0,0,0,.6);
      }
      .s-icons{
        width: 26px;
        cursor pointer
      }
    }
    .o-b{
      .other-s{
        width:500px
      }
    }
    .s-bottom{
      display flex
      justify-content flex-start
      align-items center
      margin-top 38px
      .b-btn{
        width: 123px;
        height: 30px;
        line-height:30px;
        text-align:center
        background: #FFFFFF;
        border-radius: 15px;
        border: 1px solid #999999;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        cursor pointer
        margin-right 25px
      }
      .collect-box{
        display:flex;
        justify-content flex-start
        align-items center
        cursor pointer
        .c-icon{
          width 16px;
          height 16px;
        }
        .c-text{
          margin-left 5px
        }
      }
    }
  }
}
</style>
